<template>
  <div>
    <button @click="fn1(3000)">发工资啦，我的工资是3000</button>
    <button @click="fn1(-2800)">给喜欢的女主播刷了火箭-2800</button>
    <button @click="fn1(10000)">送外卖赚了10000</button>
    <button @click="fn1(-18000)">给暗恋的女生买了爱马仕-18000</button>
    <button @click="fn1(8000)">晚上去做代驾赚了8000</button>
    <button @click="fn1(-100)">买泡面100</button>
    <button @click="fn1(-50)">买挂逼水50</button>
    <p>这个月还剩{{ num }}元</p>
  </div>
</template>

<script>
export default {
  data() {
    return { num: 0 }
  },
  methods: {
    // fn() {
    //   //methods当中的函数体里面要使用data中的数据的时候一定要加this
    //   //this指的是该组件的实例
    //   console.log(this)
    //   console.log(1)
    // },
    fn1(num) {
      this.num += num
    },
  },
  watch: {
    num(newValue, oldValue) {
      alert('现在有' + newValue + '原来有' + oldValue)
    },
  },
}
</script>

<style scoped></style>
